<template>
    <div class="oh">
        <header class="tc w100">
            <div class="title pr pr20 pl20">
                <img @click="goMine" class="pa" src="../../../assets/img/home-img/left-arrows.png">
                <h1 class="f35 cfff fn">预约成功</h1>
            </div>
        </header>
        <main class="bcfff mr20 ml20">
            <div class="tc">
                <img src="../../../assets/img/wash-car-img/right-round.png" alt="">
                <h2 class="f30 mt20">预约成功</h2>
                <p class="f25 mb30">预约编号:{{ listTable.idnum }}</p>
                <div>
                    <van-button @click="goHome" style="background-color: #0d65e9;"  class="btn w100 mt50" type="info">返回首页</van-button >
                </div>
                <div>
                    <van-button @click="reservationDetails" style="background-color: #bfbfbf;" class="btn w100 mt50 mb50" >预约详情</van-button >
                </div>
            </div>
        </main>
    </div>
</template>
<script>
export default{
    data() {
        return {
            listTable:{},
        }
    },
    mounted(){
        this.listTable = this.$route.query.el;
        // console.log(this.listTable);
    },
    methods: {
        goHome(){
            this.$router.push('home')
        },
        reservationDetails(){
            this.$router.push({
                path:'/reservationDetails',query:{el:this.listTable}
            })
        },
        goMine(){
            this.$router.push({
                path:'/allorder',query:{status:0}
            })
        }
    }
}
</script>
<style scoped>
header .title{height: 145rem;line-height: 145rem;}
header{height:435rem;background-color: #3385fd;}
header  img{height: 36rem;width: auto;left: 20rem;top: 50%;margin-top: -18rem;}
main{margin-top: -310rem;border-radius: 20rem;}
main img{margin-top: 90rem;width: 130rem;height: 130rem;}
main p{margin-top: 60rem;font-weight: bold;}
>>> main .van-button{width: 520rem !important;border-radius: 50rem;color: #fff;height: 70rem;font-size: 25rem;} 
</style>